<template>
  <nuxt-layout name="navigation">
    <Search/>
    <div class="container classify">
      <Card :is-header="false" margin="10px 0 0">
        <div class="classify-filtrate">
          <div class="classify-title">
            <el-icon>
              <FolderOpened/>
            </el-icon>
            分类
          </div>
          <div class="classify-group">
            <el-radio-group v-model="classifyId">
              <el-radio-button label="all" @click="jumpToUrl('all')">全部</el-radio-button>
              <el-radio-button :label="item.id" v-for="(item,index) in classifyList" :key="index"
                               @click="jumpToUrl(item.id)">
                {{ item.classifyName }}
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </Card>
      <Card :title="title" margin="10px 0 0">
        <div class="classify-filtrate mg-b-10">
          <div class="classify-title">
            <el-icon>
              <PriceTag/>
            </el-icon>
            标签
          </div>
          <div class="classify-group">
            <TagSelectTag :select="selectTag === 0 ? null : [Number(selectTag)]" @selectChange="selectTagChange"/>
          </div>
        </div>
        <div class="classify-filtrate mg-b-10">
          <div class="classify-title">
            <el-icon>
              <Sort/>
            </el-icon>
            排序
          </div>
          <div class="classify-group">
            <el-radio-group v-model="radioSort" @change="sortChange">
              <el-radio-button label="default">默认</el-radio-button>
              <el-radio-button label="create_time">时间</el-radio-button>
              <el-radio-button label="comments_number">评论</el-radio-button>
              <el-radio-button label="site_views">浏览</el-radio-button>
              <el-radio-button label="site_collection">收藏</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <Site ref="SiteRef" v-if="classifyId !== 'all'" :classify="classifyId" :is-page="true" :size="32"/>
        <Site ref="SiteRef" v-else :is-page="true" :size="32"/>
      </Card>
    </div>
  </nuxt-layout>
</template>

<script setup lang="ts">
import {Classify} from "@/entity/classify";
import {FolderOpened, PriceTag, Sort} from "@element-plus/icons-vue";
import {Response} from "~/entity/response";

const {setting} = useStoreToRefs(useStores.setting());
const {classifyApi} = useApi();
const router = useRouter();
const route = useRoute();
const title = ref("全部");
const classifyList = ref<Classify[]>([]);
const classifyId = ref(route.params.id);
const SiteRef = ref();
const radioSort = ref("default");
const selectTag = ref(route.query.tag || 0);

useHead({
  title: '网站分类' + setting.value?.seoSeparate + setting.value?.name,
  meta: [
    {name: 'description', content: setting.value?.seoDescription},
    {name: 'keywords', content: setting.value?.seoKeywords.join(",") + ",网站分类"}
  ]
});

onBeforeMount(() => {
  getClassifyList();
});

onMounted(() => {
  if (route.query.tag && route.query.tag != "") {
    SiteRef.value.site.tagList = [
      {
        id: route.query.tag.toString()
      }
    ];
  }
});

const getClassifyList = () => {
  classifyApi.getList().then((res: any) => {
    let {data}: Response = res;
    let arr = data || [];
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].classifyStatus == "1") {
        classifyList.value.push(arr[i]);
        if (arr[i].id === classifyId.value) {
          title.value = arr[i].classifyName;
        }
      }
    }
  });
};
const selectTagChange = (arr: any) => {
  SiteRef.value.site.tagList = arr;
  SiteRef.value.getSiteList();
};
const sortChange = (val: any) => {
  if (val == "default") {
    SiteRef.value.isAsc = "";
    SiteRef.value.orderByColumn = "";
  } else {
    SiteRef.value.isAsc = "desc";
    SiteRef.value.orderByColumn = val;
  }
  SiteRef.value.getSiteList();
};
const jumpToUrl = (url: string) => {
  router.push(url);
};
</script>

<style scoped lang="scss">
.classify {
  .classify-title {
    display: flex;
    margin-right: 50px;

    i {
      margin-right: 5px;
    }
  }

  .classify-filtrate {
    display: flex;
    align-items: center;

    .classify-title {
      width: 100px;
    }

    .classify-group {
      width: 100%
    }
  }
}
</style>